<template>
  <div class="edit-form edit-dialog">
    <el-form ref="ruleFormRef" :model="form">
      <el-descriptions
        :column="2"
        border
        :colon="true"
        label-class-name="custom-description-label-160"
        v-for="(item, index) in form.formArray"
        :key="index"
      >
        <el-descriptions-item>
          <template #label>
            <span class="colorRed">*</span>
            菜单名称
          </template>
          <el-form-item
            :prop="'formArray.' + index + '.name'"
            :rules="$formRules.input"
          >
            <el-input
              v-model="item.name"
              autocomplete="off"
              placeholder="请输入"
            />
          </el-form-item>
        </el-descriptions-item>
        <el-descriptions-item>
          <template #label>
            <span class="colorRed">*</span>
            菜单代码
          </template>
          <el-form-item
            :prop="'formArray.' + index + '.code'"
            :rules="$formRules.input"
          >
            <el-input
              v-model="item.code"
              autocomplete="off"
              placeholder="请输入"
            />
          </el-form-item>
        </el-descriptions-item>
        <el-descriptions-item>
          <template #label>
            <span class="colorRed">*</span>
            菜单路径
          </template>
          <el-form-item
            :prop="'formArray.' + index + '.jump'"
            :rules="$formRules.input"
          >
            <el-input
              v-model="item.jump"
              autocomplete="off"
              placeholder="请输入"
            />
          </el-form-item>
        </el-descriptions-item>
        <el-descriptions-item>
          <template #label>
            <span class="colorRed">*</span>
            是否显示
          </template>
          <el-form-item>
            <el-select
            style="width:100%"
              v-model="item.isDisplayInMainMenu"
              class="m-2"
              placeholder="请选择"
              size="small"
            >
              <el-option label="否" value="0" />
              <el-option label="是" value="1" />
            </el-select>
          </el-form-item>
        </el-descriptions-item>
        <el-descriptions-item>
          <template #label>
            <span class="colorRed">*</span>
            菜单排序
          </template>
          <el-form-item
            :prop="'formArray.' + index + '.sort'"
            :rules="$formRules.input"
          >
            <el-input
              v-model="item.sort"
              autocomplete="off"
              placeholder="请输入"
            />
          </el-form-item>
        </el-descriptions-item>
        <el-descriptions-item>
          <template #label>
            <span class="colorRed">*</span>
            菜单类型
          </template>
          <el-form-item
            :prop="'formArray.' + index + '.type'"
            :rules="$formRules.select"
          >
            <pub-dict-select
            style="width:100%"
              v-model="item.type"
              dict-code="XT-CDLX"
              placeholder="请选择"
            />
          </el-form-item>
        </el-descriptions-item>
        <el-descriptions-item>
          <template #label>
            <span class="colorRed">*</span>
            平台类型
          </template>
          <el-form-item
            :prop="'formArray.' + index + '.platform'"
            :rules="$formRules.select"
          >
            <pub-dict-select
            style="width:100%"
              v-model="item.platform"
              dict-code="XT-PTLX"
              placeholder="请选择"
            />
          </el-form-item>
        </el-descriptions-item>
        <el-descriptions-item>
          <template #label>菜单图标</template>
          <el-form-item>
            <el-input
              v-model="item.icon"
              autocomplete="off"
              placeholder="请输入"
            />
          </el-form-item>
        </el-descriptions-item>
        <el-descriptions-item>
          <template #label>菜单重定向</template>
          <el-form-item>
            <el-input
              v-model="item.redirect"
              autocomplete="off"
              placeholder="请输入"
            />
          </el-form-item>
        </el-descriptions-item>
        <el-descriptions-item v-if="form.formArray.length > 1">
          <template #label>操作</template>
          <div>
            <el-icon
              style="vertical-align: middle; margin-left: 15px; cursor: pointer"
              :size="20"
            >
              <Minus @click="delDict(index)" />
            </el-icon>
          </div>
        </el-descriptions-item>
      </el-descriptions>
    </el-form>
    <div class="options">
      <el-icon
        style="vertical-align: middle; margin-left: 15px; cursor: pointer"
        :size="20"
      >
        <Plus @click="addDict" />
      </el-icon>
    </div>
    <div class="btn-group">
      <el-button class="btn-form-close" @click="cancel">取消</el-button>
      <el-button
        :loading="btnLoading"
        v-prevent-repeat-click
        class="btn-form-save"
        type="primary"
        @click="submitForm(ruleFormRef)"
      >
        保存
      </el-button>
    </div>
  </div>
</template>

<script setup>
import { insertResource } from '@/api/system.js'
import $formRules from '@/utils/form-validate.js'
import { ref, reactive, onMounted, onBeforeMount } from 'vue'
import { ElMessageBox, ElMessage } from 'element-plus'

const emit = defineEmits(['cancel', 'success'])
const props = defineProps({
  idAddChild: {
    type: Boolean,
    default: false
  },
  currentPid: {
    type: [String, Number],
    default: ''
  },
  lastMenusPath: {
    type: String,
    default: ''
  },
  currentIndex: {
    type: Number,
    default: 0
  }
})
const btnLoading = ref(false)
const form = reactive({
  formArray: [
    {
      name: '',
      code: '',
      status: '',
      type: '',
      sort: '',
      jump: '',
      method: '',
      icon: '',
      isDisplayInMainMenu: '',
      redirect: '',
      platform: ''
    }
  ]
})

const ruleFormRef = ref()
const addDict = () => {
  if (props.idAddChild) {
    form.formArray.push({
      name: '',
      code: '',
      status: '',
      type: '',
      sort: '',
      pid: props.currentPid,
      jump: '',
      method: '',
      icon: '',
      isDisplayInMainMenu: '',
      redirect: '',
      platform: ''
    })
  } else {
    form.formArray.push({
      name: '',
      code: '',
      status: '',
      type: '',
      sort: '',
      jump: '',
      method: '',
      icon: '',
      isDisplayInMainMenu: '',
      redirect: '',
      platform: ''
    })
  }
}
const delDict = index => {
  form.formArray.splice(index, 1)
}
const cancel = () => {
  emit('cancel', false)
}

const submitForm = formEl => {
  if (!formEl) return
  formEl.validate(async valid => {
    if (valid) {
      btnLoading.value = true
      const res = await insertResource(form.formArray)
      if (res.succeed) {
        ElMessage.success(res.msg)
        emit('success')
      }
      btnLoading.value = false
    } else {
      return false
    }
  })
}

onMounted(() => {
  if (props.idAddChild) {
    form.formArray = [
      {
        name: '',
        code: '',
        status: '',
        type: '',
        sort: '',
        pid: props.currentPid,
        jump: '',
        method: '',
        icon: '',
        isDisplayInMainMenu: '',
        redirect: '',
        platform: ''
      }
    ]
  }
  if (props.lastMenusPath.length > 0) {
    form.formArray[0].jump = `${props.lastMenusPath}/`
  }
  form.formArray[0].sort = props.currentIndex
})
</script>

<style scoped>
.el-row {
  height: 134px;
  align-items: center;
  margin-bottom: 15px;
}
.el-col {
  height: 28px;
}

.form-item-btn-group .el-form-item__content {
  display: flex;
  justify-content: center;
  align-items: center;
}
.options {
  height: 20px;
  line-height: 20px;
  text-align: center;
  margin-top: 10px;
}
</style>
